@extends('admin.common.admin')
@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 预约管理
        <span class="c-gray en">&gt;</span> 添加预约
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        <form class="form form-horizontal" id="app">
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" size="1" v-model="formData.fangowner_id">
                            <template v-for="item in fData">
                                <option :value="item.id">@{{item.name}}</option>
                            </template>
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>租客：</label>
                <div class="formControls col-sm-10">
                    <span class="select-box" style="width:200px;">
                        <select class="select" size="1" v-model="formData.renting_id">
                            <template v-for="item in rData">
                                <option :value="item.id">@{{item.truename}}</option>
                            </template>
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>预约时间：</label>
                <div class="formControls  col-sm-9">
                    <input type="text" autocomplete="off" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" @focus="changeTime()" ref="wdate" class="input-text Wdate"
                           style="width:200px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>预约内容：</label>
                <div class="formControls  col-sm-9">
                    <textarea class="textarea" v-model="formData.cnt">@{{formData.cnt}}</textarea>
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="button" @click="dopost()" value="添加预约">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('js')
    <script src="/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fData:{!! $fData !!},
                rData:{!! $rData !!},
                formData: {
                    _token:"{{csrf_token()}}",
                    fangowner_id:1,
                    renting_id:1,
                    dtime:'',
                    cnt:'看房子'
                }
            },
            methods:{
                changeTime(){
                    //日期插件是dom插件，且执行顺序和vue虚拟dom加载时机不一致
                    this.formData.dtime=this.$refs['wdate'].value;
                },
                // 表单提交
                dopost() {
                    // 进行ajax表单提交
                    $.post("{{ route('admin.notice.store') }}", this.formData).then(ret => {
                        layer.msg('预约添加成功',{time:1500,icon:1},()=>{
                            location.href = ret.url;
                        })
                    })
                }
            },
        })
    </script>
@endsection